<script setup lang="ts">
import goodsImg from "~/assets/recommending-img.png";
import { useRoute, useRouter } from "vue-router";
import { getBuyerDetailById } from "~/api/goods";
import { buyerOrderDetail, confirmReceipt } from "~/api/order";
import { getDict } from "~/api/user";
import { useOrderStore } from "~/store/useOrder";
import { useUserStore } from "~/store/useUser";
import { useSocketStore } from "~/store/useSocket";
import { useImageCache } from "~/composables/useImageCache";
import { ref } from "vue";

// 使用图片缓存功能
const { getCoverImage } = useImageCache();

useSeoMeta({
  title: "订单详情 - 技能猴子",
  ogTitle: "订单详情 - 技能猴子",
  description: "技能猴子，找技能服务，我喜欢和技能人才直接聊",
  ogDescription: "技能猴子，找技能服务，我喜欢和技能人才直接聊",
});

const orderStore = useOrderStore();
const userStore = useUserStore();
const socketStore = useSocketStore();
const route = useRoute();
const router = useRouter();
const orderId = ref("");
const orderStatusTipsText = ref("");
const orderExpireText = ref("");
const timer = ref();
// 订单状态字典数据
const orderStatusDict = ref<any[]>([]);

// 获取订单状态字典
const getOrderStatusDict = async () => {
  try {
    const { data } = await getDict("order_status");
    orderStatusDict.value = data || [];
  } catch (e) {
    console.error('获取订单状态字典失败:', e);
    // 如果获取字典失败，使用默认值
    orderStatusDict.value = [];
  }
};

// 根据状态值获取字典标签
const getStatusLabel = (status: number) => {
  if (!orderStatusDict.value || orderStatusDict.value.length === 0) {
    return '';
  }
  const statusItem = orderStatusDict.value.find((item: any) => {
    // 字典值可能是字符串或数字，需要转换比较
    const dictValue = typeof item.dictValue === 'string' ? parseInt(item.dictValue) : item.dictValue;
    return dictValue === status;
  });
  return statusItem ? statusItem.dictLabel : '';
};

onMounted(async () => {
  // 统一使用 orderSn 参数
  orderId.value = route.query.orderSn as string;
  
  // 获取订单状态字典
  await getOrderStatusDict();
  
  if (orderId.value) {
    getOrderDetails();
    timer.value = setInterval(() => {
      orderExpireText.value = orderExpireTime();
    }, 1000);
  } else {
    console.error('未获取到订单编号参数');
    ElMessage.error('订单编号参数缺失，请从订单列表页面正确跳转');
  }
});

// 订单过期时间
const orderExpireTime = () => {
  if (!orderDetails.value.id) {
    return "";
  }

  // 优先使用remainingTime字段，如果不存在则根据创建时间计算（假设2小时支付时限）
  let expireTime;
  if (orderDetails.value.remainingTime) {
    expireTime = new Date(orderDetails.value.remainingTime).getTime();
  } else if (orderDetails.value.createTime) {
    const createTime = new Date(orderDetails.value.createTime).getTime();
    expireTime = createTime + 2 * 60 * 60 * 1000; // 2小时后过期
  } else {
    return "";
  }

  // 检查时间是否有效
  if (isNaN(expireTime)) {
    return "";
  }

  const now = new Date().getTime();
  const diff = expireTime - now;

  if (diff < 0) {
    return "订单已过期";
  }

  // 小时
  const hours = Math.floor(diff / 3600000);
  // 分钟
  const minutes = Math.floor((diff % 3600000) / 60000);
  // 秒
  const seconds = Math.floor((diff % 60000) / 1000);

  return `${hours}小时${minutes < 10 ? "0" + minutes : minutes}分${
    seconds < 10 ? "0" + seconds : seconds
  }秒`;
};

// 初始化步骤条数据
const initActivities = (): Array<{
  content: string;
  timestamp: string;
  hollow: boolean;
  size: string;
  color?: string;
}> => {
  return [
    {
      content: "支付",
      timestamp: "资金支付至平台，订单开启前可随时全额退款",
      hollow: true,
      size: "large",
    },
    {
      content: "开启服务",
      timestamp: "卖家上传需求共识，买家确认后开启订单",
      hollow: true,
      size: "large",
    },
    {
      content: "履约中",
      timestamp: "依据双方的共识内容，完成履约",
      hollow: true,
      size: "large",
    },
    {
      content: "交付与验收",
      timestamp: "买家确认验收无误，资金转至卖家账户",
      hollow: true,
      size: "large",
    },
    {
      content: "评价",
      timestamp: "双方互评并展示在主页上",
      hollow: true,
      size: "large",
    },
  ];
};

const activities = ref(initActivities());
const tabActive = ref(0);
const rateValue = ref(4);
const srcList = ref([goodsImg]);
const tapTab = (index: number) => {
  tabActive.value = index;
};
const dialogEvaluateShow = ref(false);
const toEvaluate = () => {
  dialogEvaluateShow.value = true;
};
const dialogEvaluateClose = (type: string) => {
  dialogEvaluateShow.value = false;
  if (type === "send") {
    getOrderDetails();
  }
};
const dialogCancellationOrderShow = ref(false);
const dialogCancellationOrderClose = (type: number) => {
  dialogCancellationOrderShow.value = false;
  if (type === 1) {
    getOrderDetails();
  }
};
const cancelOrder = () => {
  dialogCancellationOrderShow.value = true;
};

// 获取订单详情
// 订单状态 status：0:待支付 1:待开启 2:履约中 3:已交付 4:待评价 5:已完成 6:已取消
const orderDetails = ref<any>({});
const getOrderDetails = async () => {
  try {
    console.log('正在获取订单详情，订单ID:', orderId.value);
    // 修复API参数名：使用orderSn而不是orderId
    const { data } = await buyerOrderDetail({ orderSn: orderId.value });
    console.log('订单详情API响应:', data);
    orderDetails.value = data;
    
    // 调试：检查确认验收按钮的显示条件
    if (data) {
      console.log('订单状态 status:', data.status, '类型:', typeof data.status);
      console.log('acceptanceTime:', data.acceptanceTime);
      console.log('confirmTime:', data.confirmTime);
      console.log('confirmDeadLine:', data.confirmDeadLine);
      // 验收按钮显示条件：status === 3 且未确认验收（没有 acceptanceTime 和 confirmTime）
      const shouldShowAcceptance = Number(data.status) === 3 && !data.acceptanceTime && !data.confirmTime;
      console.log('是否显示确认验收按钮:', shouldShowAcceptance);
    }
    
    // 添加调试信息
    if (!data || !data.id) {
      console.error('订单详情数据为空或缺少ID字段:', data);
      ElMessage.error('订单详情获取失败，请检查订单编号是否正确');
      return;
    }
    
    console.log('商品封面图片:', orderDetails.value.coverPic);
    console.log('商家头像:', orderDetails.value.shopAvatar);
    
    // 预加载订单详情中的图片
    const imagesToPreload: string[] = [];
    if (orderDetails.value.coverPic && !orderDetails.value.coverPic.includes('http')) {
      imagesToPreload.push(orderDetails.value.coverPic);
    }
    if (orderDetails.value.shopAvatar && !orderDetails.value.shopAvatar.includes('http')) {
      imagesToPreload.push(orderDetails.value.shopAvatar);
    }
    
    // 预加载图片到缓存
    if (imagesToPreload.length > 0) {
      console.log('预加载图片:', imagesToPreload);
      try {
        const { preloadImages } = useImageCache();
        await preloadImages(imagesToPreload);
        console.log('图片预加载完成');
      } catch (error) {
        console.error('图片预加载失败:', error);
      }
    }
    
    // 设置时间线（步骤条）
    // 根据订单状态 status 来设置哪些步骤已完成
    // 0:待支付 1:待开启 2:履约中 3:已交付 4:待评价 5:已完成 6:已取消
    const status = orderDetails.value.status;
    
    // 重置步骤条状态
    activities.value = initActivities();
    
    // 如果订单已取消，不显示任何完成的步骤
    if (status === 6) {
      return;
    }
    
    // 步骤1：支付 - status > 0 表示已支付
    if (status > 0) {
      activities.value[0].color = "#1DBF73"; // 绿色
      activities.value[0].hollow = false; // 实心圆
    }
    
    // 步骤2：开启服务 - status > 1 表示已开启服务
    if (status > 1) {
      activities.value[1].color = "#1DBF73";
      activities.value[1].hollow = false;
    }
    
    // 步骤3：履约中 - status >= 2 表示履约中或之后的状态
    if (status >= 2) {
      activities.value[2].color = "#1DBF73";
      activities.value[2].hollow = false;
    }
    
    // 步骤4：交付与验收 - status >= 3 表示已交付或之后的状态
    if (status >= 3) {
      activities.value[3].color = "#1DBF73";
      activities.value[3].hollow = false;
    }
    
    // 步骤5：评价 - status >= 4 表示待评价或已完成
    if (status >= 4) {
      activities.value[4].color = "#1DBF73";
      activities.value[4].hollow = false;
    }
  } catch (e) {
    console.error('获取订单详情失败:', e);
    ElMessage.error('获取订单详情失败，请稍后重试');
  }
};
// 订单状态文字
const orderStatusText = computed(() => {
  if (!orderDetails.value || !orderDetails.value.id) {
    return "";
  }
  const status = orderDetails.value.status;
  const stepStatus = orderDetails.value.stepStatus;
  
  // 状态0（待支付）过期时显示已取消
  if (status === 0 && !stepStatus && orderExpireText.value === '订单已过期') {
    return getStatusLabel(6) || '已取消';
  }
  
  // 状态1（待开启）特殊处理：显示"等待卖家开启服务"
  if (status === 1) {
    return "等待卖家开启服务";
  }
  
  // 状态3（已交付）时显示待确认验收
  // 如果没有 acceptanceTime 或 confirmTime，说明还未确认验收
  if (Number(status) === 3) {
    const acceptanceTime = orderDetails.value.acceptanceTime;
    const confirmTime = orderDetails.value.confirmTime;
    // 如果没有确认验收时间，显示待确认验收
    if (!acceptanceTime && !confirmTime) {
      return '已交付，待确认验收';
    }
  }
  
  // 从字典获取状态标签
  const statusLabel = getStatusLabel(status);
  return statusLabel || orderStore.getOrderStatusName(status, stepStatus, orderExpireText.value);
});
// 订单状态提示文字
// 使用字典数据转换，如果字典中没有则使用默认文案
const orderStatusTips = computed(() => {
  if (!orderDetails.value.id) {
    return "";
  }
  const orderStatus = orderDetails.value.status;
  
  // 状态0（待支付）过期
  if (orderStatus === 0 && orderExpireText.value === "订单已过期") {
    return "超时未支付订单自动取消";
  }
  if (orderStatus === 0) {
    return "该订单会保留2小时（从创建之日算起），2小时之后如果还未付款，系统将自动关闭该订单。";
  }
  
  // 状态1（待开启）
  if (orderStatus === 1) {
    return "您已支付，请和卖家确认需求后开启服务";
  }
  
  // 状态2（履约中）
  if (orderStatus === 2) {
    return "已确认需求，履约中";
  }
  
  // 状态3（已交付）
  if (orderStatus === 3) {
    return "订单已完成交付";
  }
  
  // 状态4（待评价）
  if (orderStatus === 4) {
    return "您已验收，等待评价";
  }
  
  // 状态5（已完成）
  if (orderStatus === 5) {
    return "订单已完成";
  }
  
  // 状态6（已取消）
  if (orderStatus === 6) {
    const str =
      orderDetails.value.cancelRole === 1
        ? `${getCurrentUserDisplayName()} 已取消订单`
        : `${orderDetails.value.sellerName || "卖家"} 已取消订单`;
    const tips = str + `。取消原因：${orderDetails.value.cancelReason}`;
    return orderDetails.value.cancelReason ? tips : str;
  }
  
  return "";
});

// 添加新的计算属性
const getVersionName = computed(() => {
  const skuType = orderDetails.value?.skuType;
  return skuType === 1 ? "标准版" : "体验版";
});

const getVersionPrice = computed(() => {
  return orderDetails.value?.goodsAmount || 0;
});

const getVersionDetails = computed(() => {
  // 优先使用 features 字段
  if (orderDetails.value?.features) {
    const features = orderDetails.value.features;
    if (Array.isArray(features)) {
      // 确保每个元素都有 content 属性
      return features.map((item, index) => {
        if (typeof item === 'string') {
          return { content: item };
        } else if (item && typeof item === 'object' && item.content) {
          return item;
        }
        return { content: String(item) };
      }).filter(item => item.content); // 过滤掉空内容
    } else if (typeof features === 'string') {
      // 如果是字符串，尝试解析或直接使用
      return [{ content: features }];
    }
  }
  // 如果没有 features，尝试使用 skuName
  const skuName = orderDetails.value?.skuName;
  if (typeof skuName === 'string') {
    return [{ content: skuName }];
  } else if (Array.isArray(skuName)) {
    return skuName.map((item, index) => {
      if (typeof item === 'string') {
        return { content: item };
      } else if (item && typeof item === 'object' && item.content) {
        return item;
      }
      return { content: String(item) };
    }).filter(item => item.content);
  }
  // 默认返回空数组
  return [];
});

const getVersionDeliverDays = computed(() => {
  return orderDetails.value?.deliverDays || 0;
});

const getVersionIntroduce = computed(() => {
  return orderDetails.value?.features || orderDetails.value?.introduce || '';
});

//开启服务时间
const getOpenServiceTime = computed(() => {
  const serverTimeType = orderDetails.value?.serverTimeType;
  // 0: 24小时内, 1: 3天内, 2: 7天内, 3: 任何时候
  if (serverTimeType === 0) return "24小时";
  if (serverTimeType === 1) return "3天";
  if (serverTimeType === 2) return "7天";
  if (serverTimeType === 3) return "任何时候";
  return "-";
});


// 计算剩余验收时间
// 直接使用接口返回的 confirmDeadLine 字段（确认验收截止时间，long类型时间戳，单位：毫秒）
const remainingTime = computed(() => {
  // 安全检查：确保必要的数据存在
  if (!orderDetails.value) {
    return '0天0小时0分钟';
  }
  
  // 直接使用接口返回的 confirmDeadLine 字段（long类型时间戳）
  const confirmDeadLine = orderDetails.value.confirmDeadLine;
  
  // 检查时间戳是否存在且有效
  if (confirmDeadLine === null || confirmDeadLine === undefined || confirmDeadLine === 0) {
    return '0天0小时0分钟';
  }
  
  const now = new Date().getTime();
  
  // confirmDeadLine 是 long 类型的时间戳（毫秒），直接使用
  // 计算剩余时间：确认验收截止时间戳 - 当前时间戳
  const diffTime = Number(confirmDeadLine) - now;
  
  // 如果已经过期，显示0
  if (diffTime <= 0) {
    return '0天0小时0分钟';
  }
  
  // 转换为天、小时、分钟
  const days = Math.floor(diffTime / (24 * 60 * 60 * 1000));
  const hours = Math.floor((diffTime % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
  const minutes = Math.floor((diffTime % (60 * 60 * 1000)) / (60 * 1000));
  return `${days}天${hours}小时${minutes}分钟`;
});

// 确认验收
const acceptance = async () => {
  try {
    ElMessageBox.confirm("请确保项目已完成并满足验收标准，是否确认验收？", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
    }).then(async () => {
      await confirmReceipt({ orderSn: orderId.value });
      ElMessage.success("确认验收成功");
      getOrderDetails();
    });
  } catch (e) {
    console.error(e);
    ElMessage.error("确认验收失败，请稍后重试");
  }
};
// 订单时间线数据
const orderTimeLineData = computed(() => {
  const data: Array<{ title: string; time: any; message?: any }> = [];
  if (orderDetails.value.createTime) {
    data.push({
      title: "订单待支付",
      time: orderDetails.value.createTime,
    });
  }
  if (orderDetails.value.payTime) {
    data.push({
      title: "订单已支付",
      time: orderDetails.value.payTime,
    });
  }
  if (orderDetails.value.knowTime) {
    data.push({
      title: `${getCurrentUserDisplayName()} 已知悉了订单`,
      time: orderDetails.value.knowTime,
    });
  }
  if (orderDetails.value.requireTime) {
    data.push({
      title: `${getCurrentUserDisplayName()} 提交了需求共识`,
      message: orderDetails.value.requirement,
      time: orderDetails.value.requireTime,
    });
  }
  if (orderDetails.value.startTime) {
    data.push({
      title: "服务开启",
      time: orderDetails.value.startTime,
    });
  }
  if (orderDetails.value.acceptanceTime) {
    data.push({
      title: `${getCurrentUserDisplayName()} 发起了验收`,
      time: orderDetails.value.acceptanceTime,
    });
  }
  if (orderDetails.value.confirmTime) {
    data.push({
      title: `${getBuyerDisplayName()} 确认验收`,
      time: orderDetails.value.confirmTime,
    });
  }
  // 买家评价：仅在存在 buyerCommentTime 时展示
  if (orderDetails.value.buyerCommentTime) {
    data.push({
      title: `${getBuyerDisplayName()} 发表了评价`,
      time: orderDetails.value.buyerCommentTime,
    });
  }
  if (orderDetails.value.cancelRole === 1 || orderDetails.value.cancelRole === 2) {
    data.push({
      title: `${
        orderDetails.value.cancelRole === 1 ? getCurrentUserDisplayName() : (orderDetails.value.sellerName || "卖家")
      } 取消了订单`,
      time: orderDetails.value.cancelTime,
    });
  }
  return data.reverse();
});

// 获取当前登录用户显示名，优先 nickName > nickname > username(手机号) > "用户"
function getCurrentUserDisplayName() {
  const userInfo = userStore.getUserInfo;
  const name = userInfo?.nickName || userInfo?.nickname || userInfo?.username || '用户';
  const phone = userInfo?.phonenumber;
  return phone && phone !== name ? `${name}(${phone})` : name;
}

// 获取买家显示名，优先 buyerName > buyerNickName > 当前登录昵称 > "买家"
function getBuyerDisplayName() {
  return (
    orderDetails.value.buyerName ||
    (userStore.getUserInfo && (userStore.getUserInfo.nickName || userStore.getUserInfo.nickname)) ||
    '我'
  );
}

// 订单评价信息
const commentList = computed(() => {
  const list = [];
  if (!orderDetails.value.comment && !orderDetails.value.salesComment) return [];
  // 克隆数据
  let cloneSalesComment = {};
  try {
    cloneSalesComment = JSON.parse(JSON.stringify(orderDetails.value.salesComment));
    if (cloneSalesComment) cloneSalesComment.userType = "sales";
  } catch (e) {
    console.log(e);
  }
  let cloneComment = {};
  try {
    cloneComment = JSON.parse(JSON.stringify(orderDetails.value.comment));
    if (cloneComment) cloneComment.userType = "user";
  } catch (e) {
    console.log(e);
  }
  if (!orderDetails.value.comment && orderDetails.value.salesComment) {
    list.push(cloneSalesComment);
  }
  if (orderDetails.value.comment && !orderDetails.value.salesComment) {
    list.push(cloneComment);
  }
  if (orderDetails.value.comment && orderDetails.value.salesComment) {
    // 判断commentTime字段，先评价的放在后面
    const commentTime = new Date(orderDetails.value.commentTime).getTime();
    const salesCommentTime = new Date(orderDetails.value.commentTime).getTime();

    if (commentTime > salesCommentTime) {
      list.push(cloneSalesComment);
      list.push(cloneComment);
    } else {
      list.push(cloneComment);
      list.push(cloneSalesComment);
    }
  }
  return list;
});
// 是否显示取消订单
// 0:待支付 1:待开启 可以取消；6:已取消 不显示
const cancelShow = computed(() => {
  if (
    (orderDetails.value.status === 0 && orderExpireText.value !== "订单已过期") ||
    orderDetails.value.status === 1
  ) {
    return true;
  }
  return false;
});
// 去支付
const toPay = (item) => {
  if (orderExpireText.value === "订单已过期") {
    return ElMessage.error("订单已过期");
  }
  orderStore.setPayInfo(orderDetails.value);
  router.push(`/pay?orderSn=${orderId.value}&gid=${orderDetails.value.goodsId}`);
};
// 同意加价去支付
const dialogRiseRecordShow = ref(true);
const dialogRiseRecordClose = () => {
  dialogRiseRecordShow.value = false;
};
const showRisBtn = computed(() => {
  // 2:履约中 显示加价记录
  if (orderDetails.value.riseRecord && orderDetails.value.status === 2) {
    if (orderDetails.value.riseRecord.status === 1) {
      dialogRiseRecordShow.value = true;
      return true;
    }
  }
  return false;
});
// 重新下单
const reCreateOrder = () => {
  // console.log(orderDetails.value);
  const skuType = orderDetails.value?.skuType ?? 1;
  router.push(
    `/buyGoods?id=${orderDetails.value.goodsId}&var=${skuType}`
  );
};
// 联系平台
const serviceQrcodeShow = ref(false);
const toChat = () => {
  //router.push("/chat?to=cs");
  serviceQrcodeShow.value = true;
};
// 发送消息
const createChatStatus = ref(false);
const toIM = () => {
  if (createChatStatus.value) {
    return;
  }
  createChatStatus.value = true;
  if (!userStore.getToken) {
    router.push("/login");
    return;
  }
  const uimKey = orderDetails.value.uimKey;
  if (uimKey) {
    socketStore.setCurrentImKey(uimKey);
    socketStore.sendMessage(
      "chatMsg",
      {
        to: uimKey,
        content: "现在可以开始沟通了",
        contentType: 4,
        exData: {
          goodsInfo: {
            id: orderDetails.value.id,
            goodsName: orderDetails.value.goodsName,
            coverPic: [orderDetails.value.coverPic]
          },
          trialVersion: orderDetails.value.versionInfo,
        },
      },
      () => {
        setTimeout(() => {
          createChatStatus.value = false;
          router.push(`/chat?orderSn=${orderId.value}&type=4`);
        }, 1000);
      }
    );
  }
};

// 获取剩余交付时间
const getRemainingTime = computed(() => {
  // 只在状态2（履约中）时计算（支持数字和字符串）
  const status = Number(orderDetails.value.status);
  if (status !== 2) {
    return null;
  }
  
  // 安全检查：确保必要的数据存在
  if (!orderDetails.value) {
    return null;
  }
  
  // 使用 endTime 字段直接计算剩余交付时间
  if (!orderDetails.value.endTime) {
    return null; // endTime 不存在时不显示
  }
  
  const endTime = new Date(orderDetails.value.endTime);
  
  // 检查日期是否有效
  if (isNaN(endTime.getTime())) {
    return null; // 日期无效时不显示
  }
  
  const now = new Date();
  const remainingTime = endTime.getTime() - now.getTime();
  
  // 如果交付日期已过（超过1小时），显示已过期
  if (remainingTime < -60 * 60 * 1000) {
    const overdueDays = Math.floor(Math.abs(remainingTime) / (24 * 60 * 60 * 1000));
    const overdueHours = Math.floor((Math.abs(remainingTime) % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
    return {
      days: `已逾期${overdueDays}天${overdueHours}小时`,
      isOverdue: true,
    };
  }
  
  // 如果交付日期已过但不超过1小时，显示即将到期
  if (remainingTime < 0) {
    return {
      days: '即将到期',
      isOverdue: true,
    };
  }
  
  // 计算剩余时间
  const days = Math.floor(remainingTime / (24 * 60 * 60 * 1000));
  const hours = Math.floor((remainingTime % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
  const minutes = Math.floor((remainingTime % (60 * 60 * 1000)) / (60 * 1000));
  
  // 如果剩余时间小于1分钟，显示"即将到期"
  if (days === 0 && hours === 0 && minutes === 0) {
    return {
      days: '即将到期',
      isOverdue: false,
    };
  }
  
  // 格式化显示：根据实际情况显示天数、小时、分钟
  let timeText = '';
  if (days > 0) {
    timeText += `${days}天`;
  }
  if (hours > 0) {
    timeText += `${hours}小时`;
  }
  if (minutes > 0) {
    timeText += `${minutes}分钟`;
  }
  
  return {
    days: timeText || '即将到期',
    isOverdue: false,
  };
});

// 格式化日期时间
const formatDateTime = (dateTime: string | Date) => {
  if (!dateTime) return '-';
  const date = new Date(dateTime);
  if (isNaN(date.getTime())) return '-';
  
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};
</script>

<template>
  <BaseHeaderMenuWhite bg-color="white" />
  <div class="body">
    <div class="order-box">
      <h4 v-if="orderDetails.status === 1" class="page-title">订单详情</h4>
      <div v-else class="tabs">
        <h4 class="page-title" :class="{ active: tabActive === 0 }" @click="tapTab(0)">
          订单详情
        </h4>
        <h4 class="page-title" :class="{ active: tabActive === 1 }" @click="tapTab(1)">
          订单进展
        </h4>
      </div>
      <div class="box">
        <div class="box-left">
          <template v-if="tabActive === 0 && orderDetails.id">
            <div class="status-info">
              <div style="flex: 1">
                <p class="status">
                  <img
                    v-if="
                      (orderDetails.status === 0 && orderExpireText !== '订单已过期') ||
                      orderDetails.status === 1 ||
                      orderDetails.status === 2
                    "
                    src="~/assets/time-icon.png"
                    alt=""
                  />
                  <img
                    v-if="
                      orderDetails.status === 6 ||
                      (orderDetails.status === 0 && orderExpireText === '订单已过期')
                    "
                    src="~/assets/cancel-icon.png"
                    alt=""
                  />
                  <img
                    v-if="
                      orderDetails.status === 3 ||
                      orderDetails.status === 4 ||
                      orderDetails.status === 5
                    "
                    src="~/assets/comm-icon.png"
                    alt=""
                  />
                  <span>{{ orderStatusText }}</span>
                  <b
                    class="time"
                    v-if="orderDetails.status === 0 && orderExpireText !== '订单已过期'"
                    >支付剩余时间：{{ orderExpireText }}</b
                  >
                  <b
                    class="time-long"
                    v-if="orderDetails && orderDetails.status != null && Number(orderDetails.status) === 3 && !orderDetails.acceptanceTime && !orderDetails.confirmTime"
                    >自动验收时间：{{ remainingTime }}</b
                  >
                  <template v-if="getRemainingTime && orderDetails.status === 2">
                    <b :class="getRemainingTime.isOverdue?'time':'no-time'">剩余交付时间：{{ getRemainingTime.days }}</b>
                  </template>
                </p>
                <p class="tips">{{ orderStatusTips }}</p>
                <p
                  class="tips"
                  style="color: #ff8c1d; padding-top: 6px"
                  v-if="orderDetails.status === 2 && orderDetails.delayDays"
                >
                  延长交付：{{ orderDetails.delayDays }}天, 延长原因：{{
                    orderDetails.delayReason
                  }}
                </p>
                <p
                  class="tips"
                  style="color: #ff8c1d; padding-top: 6px"
                  v-if="orderDetails.status === 1 && orderDetails.stepStatus === 2"
                >
                  需求共识：{{ orderDetails.requirement }}
                </p>
              </div>
              <!-- 确认验收按钮：status === 3 且未确认验收（没有 acceptanceTime 和 confirmTime） -->
              <span
                v-if="orderDetails && orderDetails.status != null && Number(orderDetails.status) === 3 && !!orderDetails.acceptanceTime && !orderDetails.confirmTime"
                class="btn"
                @click="acceptance"
                >确认验收</span
              >
              <!-- 评价按钮：仅 status === 4（待评价）时显示，且未评价 -->
              <span
                v-if="
                  orderDetails && orderDetails.status != null &&
                  Number(orderDetails.status) === 4 &&
                  !orderDetails.buyerCommentStatus
                "
                class="btn"
                @click="toEvaluate"
                >评价</span
              >
            </div>
            <div class="goods-info">
              <div class="goods-head">
                <img
                  v-if="orderDetails.coverPic"
                  class="goods-img"
                  :src="getCoverImage(orderDetails.coverPic)"
                  alt=""
                />
                <img v-else class="goods-img" src="~/assets/goods-default.png" alt="" />
                <div class="info">
                  <h4 v-if="orderDetails.goodsName">
                    {{ orderDetails.goodsName }}
                  </h4>
                  <div class="user">
                    <span class="name"
                      >{{ getVersionName }} · ¥{{ getVersionPrice }}</span
                    >
                  </div>
                </div>
              </div>
              <div class="type">
                <span>您将得到</span>
                <span>{{ getVersionName }}</span>
              </div>
              <div class="service-list">
                <p v-for="(item, index) in getVersionDetails" :key="index">
                  <img src="~/assets/checked-icon.png" alt="" />
                  <span>{{ item.content }}</span>
                </p>
              </div>
              <p class="jf">
                <span>交付周期</span>
                <span>{{ getVersionDeliverDays }}天</span>
              </p>
              <p class="jf">
                <span>开启时间</span>
                <span v-if="orderDetails.startTime">{{ formatDateTime(orderDetails.startTime) }}</span>
                <span v-else-if="orderDetails.serverTimeType === 3">现在下单，{{ getOpenServiceTime }}开启服务</span>
                <span v-else>现在下单，{{ getOpenServiceTime }}內开启服务</span>
              </p>
              <p class="jf" style="align-items: flex-start">
                <span style="flex: 1; min-width: 50px">备注</span>
                <span>{{ orderDetails.remark || "-" }}</span>
              </p>
            </div>
            <div class="order-user">
              <div class="item">
                <span class="title">卖家昵称</span>
                <div class="right">
                  <img
                    v-if="orderDetails.shopAvatar"
                    class="head"
                    :src="getCoverImage(orderDetails.shopAvatar)"
                    alt=""
                  />
                  <img v-else class="head" src="~/assets/app-mj.png" alt="" />
                  <span class="name">{{ orderDetails.shopName }}</span>
                  <img class="chat-icon" src="~/assets/chat-icon.png" alt="" />
                  <span class="to-chat" @click="toIM">发送消息</span>
                </div>
              </div>
              <div class="item">
                <span class="title">手机号</span>
                <div class="right">
                  <span>{{ orderDetails?.shopMobile || "-" }}</span>
                </div>
              </div>
              <div class="item">
                <span class="title">微信号</span>
                <div class="right">
                  <span>{{ orderDetails?.shopWechat || "-" }}</span>
                </div>
              </div>
              <div class="item">
                <span class="title">飞书号</span>
                <div class="right">
                  <span>{{ orderDetails?.sellerFeishu || "-" }}</span>
                </div>
              </div>
            </div>
            <!--		履约中/待评价/待验收	-->
            <div class="order-user" style="margin-top: 16px">
              <div class="item">
                <span class="title">订单编号</span>
                <div class="right">
                  <span>{{ orderDetails.orderSn }}</span>
                </div>
              </div>
              <div class="item">
                <span class="title">创建时间</span>
                <div class="right">
                  <span>{{ orderDetails.createTime }}</span>
                </div>
              </div>
              <template v-if="orderDetails.payTime">
                <div class="item">
                  <span class="title">支付时间</span>
                  <div class="right">
                    <span>{{ orderDetails.payTime || "-" }}</span>
                  </div>
                </div>
                <div class="item">
                  <span class="title">支付方式</span>
                  <div class="right">
                    <span>{{ orderDetails.payType || "-" }}</span>
                  </div>
                </div>
              </template>
            </div>
            <!-- <p class="btns">
              <span v-if="cancelShow">取消订单</span>
              <span
                v-if="
                  orderDetails.status === 0 && orderExpireText !== '订单已过期'
                "
                >继续支付</span
              >
            </p> -->
          </template>
          <template v-if="tabActive === 1">
            <div class="time-line-box">
              <template
                v-if="orderDetails.commentList && orderDetails.commentList.length"
              >
                <TimeLine
                  v-for="(item, index) in commentList"
                  :key="item.id"
                  :activities="index === 0"
                >
                  <p
                    class="title"
                    :style="{
                      color:
                        index === 0 ? 'rgba(25, 30, 40, 1)' : 'rgba(25, 30, 40, 0.6)',
                    }"
                  >
                    {{
                      item.userType === "sales"
                        ? `买家 ${userStore.getUserInfo.nickName} 给出了评价`
                        : `卖家 ${orderDetails.nickName} 给出了评价`
                    }}
                  </p>
                  <div class="content-slot">
                    <p class="rate">
                      <span
                        :style="{
                          color:
                            index === 0 ? 'rgba(25, 30, 40, 1)' : 'rgba(25, 30, 40, 0.6)',
                        }"
                        >{{ item.userType === "sales" ? "专业能力" : "服务满意" }}</span
                      >
                      <el-rate
                        :model-value="
                          item.userType === 'sales'
                            ? item.competenceScore
                            : item.requireClarityScore
                        "
                        :show-score="true"
                        size="large"
                        void-color="rgba(25, 30, 40, 0.12)"
                        disabled
                        :colors="['#1DBF73', '#1DBF73', '#1DBF73']"
                      />
                    </p>
                    <p class="rate">
                      <span
                        :style="{
                          color:
                            index === 0 ? 'rgba(25, 30, 40, 1)' : 'rgba(25, 30, 40, 0.6)',
                        }"
                        >{{ item.userType === "sales" ? "服务态度" : "响应及时" }}</span
                      >
                      <el-rate
                        :model-value="
                          item.userType === 'sales'
                            ? item.attitudeScore
                            : item.responseScore
                        "
                        :show-score="true"
                        size="large"
                        void-color="rgba(25, 30, 40, 0.12)"
                        disabled
                        :colors="['#1DBF73', '#1DBF73', '#1DBF73']"
                      />
                    </p>
                    <p class="rate">
                      <span
                        :style="{
                          color:
                            index === 0 ? 'rgba(25, 30, 40, 1)' : 'rgba(25, 30, 40, 0.6)',
                        }"
                        >{{ item.userType === "sales" ? "交付质量" : "协作顺畅" }}</span
                      >
                      <el-rate
                        :model-value="
                          item.userType === 'sales'
                            ? item.qualityScore
                            : item.cooperateScore
                        "
                        :show-score="true"
                        size="large"
                        void-color="rgba(25, 30, 40, 0.12)"
                        disabled
                        :colors="['#1DBF73', '#1DBF73', '#1DBF73']"
                      />
                    </p>
                    <p
                      class="text"
                      :style="{
                        color:
                          index === 0 ? 'rgba(25, 30, 40, 1)' : 'rgba(25, 30, 40, 0.6)',
                      }"
                    >
                      {{ item.comment }}
                    </p>
                    <div
                      class="demo-image__preview"
                      v-if="item.commentPics && item.commentPics.length"
                    >
                      <el-image
                        v-for="img in item.commentPics"
                        :key="img"
                        style="width: 74px; height: 54px; border-radius: 4px"
                        :src="img"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                        :preview-src-list="item.commentPics"
                        :initial-index="4"
                        fit="scale-down"
                      />
                    </div>
                  </div>
                </TimeLine>
              </template>
              <TimeLine
                v-for="(item, index) in orderTimeLineData"
                :key="item.title"
                :title="item.title"
                :time="item.time"
                :activities="index === 0 && commentList.length === 0"
              >
                <p v-if="item.message" class="info-text">{{ item.message }}</p>
                <p class="tips">{{ item.time }}</p>
              </TimeLine>
            </div>
          </template>
        </div>
        <div class="box-right">
          <div class="goods-info" v-if="orderDetails.goodsName">
            <div class="goods-head">
              <img class="goods-img" :src="getCoverImage(orderDetails.coverPic)" alt="" />
              <div class="info">
                <h4>
                  {{ orderDetails.goodsName }}
                </h4>
                <div class="user">
                  <span class="name">{{ getVersionName }} · ¥{{ getVersionPrice }}</span>
                </div>
              </div>
            </div>
            <p class="price">
              <span>所购规格</span>
              <span style="color: #191e28">{{ getVersionName }}</span>
            </p>
            <p class="price">
              <span>服务总价</span>
              <span style="color: #191e28">¥{{ getVersionPrice }}</span>
            </p>
            <p class="count">
              订单金额：<span><b>¥</b>{{ orderDetails.payAmount }}</span>
            </p>
            <div class="submit-order">
              <span class="cancal-order" @click="cancelOrder" v-if="cancelShow"
                >取消订单</span
              >
              <span
                class="continue-pay"
                v-if="orderDetails.status === 0 && orderExpireText !== '订单已过期'"
                @click="toPay"
                >继续支付</span
              >
              <span
                class="rload-order"
                v-if="orderDetails.status === 0 && orderExpireText === '订单已过期'"
                @click="reCreateOrder"
                >重新下单</span
              >
            </div>
            <h4 class="line-title">交易流程</h4>
            <div class="timeline">
              <el-timeline style="max-width: 600px">
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :color="activity.color"
                  :size="activity.size"
                  :hollow="activity.hollow"
                  :timestamp="activity.timestamp"
                >
                  {{ activity.content }}
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
          <div class="support">
            <h3><span>平台支持</span> <span @click="toChat">联系平台</span></h3>
            <p class="tips">
              若在订单履约的过程中遇到任何问题，可联系平台，我们会第一时间为双方提供协助。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <BaseFooter />
  <!-- 评价 -->
  <DialogEvaluate
    v-if="dialogEvaluateShow"
    @close="dialogEvaluateClose"
    :orderDetails="orderDetails"
  />
  <DialogCancellationOrder
    :orderDetails="orderDetails"
    v-if="dialogCancellationOrderShow"
    @close="dialogCancellationOrderClose"
  />
  <!--  -->
  <DialogRiseRecord
    v-if="dialogRiseRecordShow && showRisBtn"
    :orderDetails="orderDetails"
    @close="dialogRiseRecordClose"
  />
  <!-- 添加客服 -->
  <dialogServiceQrcode v-if="serviceQrcodeShow" @close="serviceQrcodeShow = false" />
</template>

<style scoped lang="scss">
.body {
  background: #f9f9f9;
  padding-top: 80px;
  padding-bottom: 36px;
}
.tabs {
  display: flex;
  border-bottom: 1px solid rgba(25, 30, 40, 0.08);
  margin-bottom: 16px;
  .page-title {
    cursor: pointer;
    font-size: 16px;
    &.active {
      color: #1dbf73;
      position: relative;
      &:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 64px;
        height: 2px;
        background: #1dbf73;
        margin-left: -32px;
      }
    }
    &:nth-child(1) {
      margin-right: 32px;
    }
  }
}
.order-box {
  width: 1100px;
  margin: 0 auto;
  padding-top: 32px;
}
.page-title {
  padding-bottom: 16px;
  font-size: 20px;
}
.box {
  display: flex;
}
.box-left {
  flex: 1;
}
.btns {
  display: flex;
  justify-content: flex-end;
  padding: 16px 0;
  span {
    width: 92px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    border-radius: 8px 8px 8px 8px;
    cursor: pointer;
    &:nth-child(1) {
      background: #ffffff;
      border: 1px solid rgba(25, 30, 40, 0.08);
      margin-right: 12px;
    }
    &:nth-child(2) {
      background: #1dbf73;
      border: 1px solid rgba(25, 30, 40, 0.08);
      color: #fff;
    }
  }
}
.status-info {
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 24px;
  box-sizing: border-box;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  .status {
    display: flex;
    align-items: center;
    margin-bottom: 13px;
    img {
      width: 24px;
      height: 24px;
      margin-right: 8px;
      border-radius: 50%;
    }
    span {
      line-height: 24px;
      font-size: 20px;
      font-weight: 600;
      color: #191e28;
    }
    .time {
      color: #ff4f4f;
      background: rgba(255, 79, 79, 0.08);
      border-radius: 10px;
      display: inline-block;
      height: 28px;
      line-height: 28px;
      margin-left: 14px;
      padding: 0 12px;
    }
    .no-time{
      color: rgba(255, 255, 255, 1);
      background: #1dbf73;
      border-radius: 10px;
      display: inline-block;
      height: 28px;
      line-height: 28px;
      margin-left: 14px;
      padding: 0 12px;
    }
    .time-long{
      color: #1dbf73;
      background: rgba(29,191,115,0.08);;
      border-radius: 10px;
      display: inline-block;
      height: 28px;
      line-height: 28px;
      margin-left: 14px;
      padding: 0 12px;
    }
  }
  .tips {
    padding-left: 32px;
    color: rgba(25, 30, 40, 0.48);
  }
  .btn {
    width: 92px;
    height: 36px;
    background: #1dbf73;
    border-radius: 8px 8px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
  }
}
.goods-info {
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  background: #ffffff;
  padding: 20px 24px;
  margin-bottom: 16px;
  .goods-head {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .goods-img {
      width: 120px;
      height: 76px;
      margin-right: 12px;
      cursor: pointer;
      border-radius: 8px;
    }
    .info {
      h4 {
        font-size: 15px;
        color: #191e28;
        margin-bottom: 12px;
        cursor: pointer;
      }
      p {
        display: flex;
        align-items: center;
        span:nth-child(1) {
          flex: 1;
          font-size: 12px;
          color: rgba(25, 30, 40, 0.6);
        }
        span {
          color: #ff4f4f;
          font-size: 22px;
          font-weight: bold;
          b {
            font-size: 14px;
          }
        }
      }
    }
  }
  .type {
    display: flex;
    align-items: center;
    span {
      color: #191e28;
      font-size: 16px;
      margin-right: 16px;
      display: flex;
      font-weight: bold;
    }
    span:nth-child(1) {
      flex: 1;
    }
  }
  .service-list {
    margin: 16px 0;
    background: rgba(25, 30, 40, 0.02);
    border-radius: 12px 12px 12px 12px;
    padding: 20px;
    box-sizing: border-box;
    p {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      line-height: 24px;
      &:last-child {
        margin-bottom: 0;
      }
      img {
        width: 15px;
        height: 15px;
        margin-right: 5px;
      }
    }
  }
  .jf {
    display: flex;
    align-items: center;
    line-height: 24px;
    margin-bottom: 12px;
    color: rgba(25, 30, 40, 0.48);
    font-size: 16px;
    span:nth-child(1) {
      flex: 1;
      font-weight: bold;
    }
    span:nth-child(2) {
      color: #191e28;
      font-weight: bold;
    }
  }
  .textarea {
    height: 140px;
    textarea {
      width: 100%;
      height: 100%;
      resize: none;
      background: rgba(25, 30, 40, 0.02);
      border-radius: 12px 12px 12px 12px;
      border: 1px solid rgba(25, 30, 40, 0.08);
      outline: none;
      padding: 12px 16px;
      box-sizing: border-box;
    }
  }
}
.order-user {
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  background: #ffffff;
  padding: 20px 24px;
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    line-height: 24px;
    .title {
      font-size: 16px;
      color: rgba(25, 30, 40, 0.48);
      font-weight: bold;
    }
    .right {
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 16px;
      justify-content: flex-end;
      .head {
        width: 24px;
        height: 24px;
        margin-right: 8px;
        cursor: pointer;
        border-radius: 50%;
      }
      .name {
        margin-right: 24px;
        cursor: pointer;
      }
      .chat-icon {
        width: 16px;
        height: 16px;
        margin-right: 6px;
        cursor: pointer;
      }
      .to-chat {
        color: #1dbf73;
        cursor: pointer;
      }
    }
  }
}
.time-line-box {
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 24px;
  box-sizing: border-box;
  .title {
    font-size: 16px;
    color: rgba(25, 30, 40, 0.6);
    font-weight: bold;
    margin-bottom: 12px;
  }
  .line-time {
    flex: 1;
    text-align: right;
    color: rgba(25, 30, 40, 0.48);
    font-size: 12px;
    font-weight: none;
  }
  .tips {
    color: rgba(25, 30, 40, 0.48);
    line-height: 24px;
  }
  .info-text {
    color: rgba(25, 30, 40, 0.48);
    font-size: 12px;
    padding: 5px 0;
  }
  .content-slot {
    .rate {
      display: flex;
      align-items: center;
      span {
        color: #191e28;
        font-weight: bold;
      }
    }
    .text {
      color: #191e28;
      margin-bottom: 8px;
      line-height: 24px;
    }
  }
}
.box-right {
  flex: 0 0 382px;
  margin-left: 24px;
  .goods-info {
    .goods-head {
      h4 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal; /* 或者使用 nowrap，但这里使用 normal 以支持多行 */
        margin-bottom: 6px;
      }
      .user {
        display: flex;
        align-items: center;
        .head {
          width: 24px;
          height: 24px;
          position: relative;
          margin-right: 6px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 100%;
          }
          span {
            position: absolute;
            bottom: -2px;
            right: 0;
            width: 10px;
            height: 10px;
            background: #1dbf73;
            border-radius: 100%;
            border: 2px solid #ffffff;
            box-sizing: border-box;
          }
        }
        .name {
          color: rgba(25, 30, 40, 0.72);
          padding-right: 4px;
        }
        .lv {
          color: #1dbf73;
          font-size: 12px;
        }
      }
    }
  }
  .price {
    display: flex;
    align-items: center;
    line-height: 24px;
    margin-bottom: 16px;
    span:nth-child(1) {
      flex: 1;
      font-weight: bold;
      font-size: 16px;
    }
    span:nth-child(2) {
      font-size: 16px;
      font-weight: bold;
      color: #ff4f4f;
    }
  }
  .count {
    text-align: right;
    padding: 20px 0 22px;
    border-top: 1px solid #ededee;
    font-size: 16px;
    color: rgba(25, 30, 40, 0.6);
    span {
      font-weight: bold;
      font-size: 22px;
      color: #ff4f4f;
      b {
        font-size: 16px;
      }
    }
  }
  .submit-order {
    display: flex;
    span {
      flex: 1;
      cursor: pointer;
    }
    .cancal-order {
      height: 48px;
      line-height: 48px;
      background: #ffffff;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid rgba(25, 30, 40, 0.08);
      text-align: center;
      font-size: 16px;
      color: rgba(25, 30, 40, 0.6);
    }
    .continue-pay {
      height: 48px;
      background: #1dbf73;
      border-radius: 8px 8px 8px 8px;
      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 16px;
      color: #fff;
      font-weight: bold;
      margin-bottom: 16px;
      cursor: pointer;
      margin-left: 16px;
    }
    .rload-order {
      height: 48px;
      background: #1dbf73;
      border-radius: 8px 8px 8px 8px;
      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 16px;
      color: #fff;
      font-weight: bold;
      margin-bottom: 16px;
      cursor: pointer;
      margin-left: 16px;
    }
  }
  .line-title {
    margin-bottom: 12px;
    font-size: 16px;
    color: #191e28;
    line-height: 24px;
    margin-top: 6px;
  }
  .support {
    background: #ffffff;
    box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
    border-radius: 16px 16px 16px 16px;
    border: 1px solid rgba(25, 30, 40, 0.08);
    padding: 24px;
    box-sizing: border-box;
    h3 {
      display: flex;
      line-height: 24px;
      justify-content: space-between;
      margin-bottom: 12px;
      font-size: 16px;
      span:nth-child(2) {
        color: #1dbf73;
        cursor: pointer;
      }
    }
    p {
      color: rgba(25, 30, 40, 0.48);
      line-height: 24px;
    }
  }
}
</style>

<style>
.el-timeline-item__content {
  display: flex;
  font-weight: bold;
}
.content-slot .el-rate .el-rate__icon {
  font-size: 24px;
  margin-right: 0;
}
</style>
